<!-- 酒店订单详情 -->
<template>
  <div class="hotel_order_details">
    <el-container class="base_details_container">
      <BackTitleView v-if="typeKey === 'after'" :title="`售后详情-${data.afterSaleItem.afterSaleStatusName}`" />
      <BackTitleView v-else :title="`订单详情-${data.orderItem.status}`" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="订单编号：">{{ data.orderItem.orderCode }}</el-descriptions-item>
                <el-descriptions-item label="归属基地：">{{ data.orderItem.shopName }}</el-descriptions-item>
                <el-descriptions-item label="下单时间：">{{ data.orderItem.createTime }}</el-descriptions-item>
                <el-descriptions-item label="付款时间：">{{ data.orderItem.payTime }}</el-descriptions-item>
                <el-descriptions-item label="活动优惠：">-¥{{ data.orderItem.discountMoney }}</el-descriptions-item>
                <el-descriptions-item label="储值支付：">-¥{{ data.orderItem.depositMoney }}</el-descriptions-item>
                <el-descriptions-item label="实付金额：">¥{{ data.orderItem.dueMoney }}</el-descriptions-item>
                <el-descriptions-item v-if="data.orderItem.agentMemberName" label="分销员：">{{ data.orderItem.agentMemberName }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="base_details_title">预定人信息</div>
            <div class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="入住人数：">{{ data.orderItem.persionNum }}</el-descriptions-item>
                <el-descriptions-item label="入住日期：">{{ data.guestItemList[0].arriveDate }}</el-descriptions-item>
                <el-descriptions-item label="离店日期：">{{ data.guestItemList[0].departureDate }}</el-descriptions-item>
              </el-descriptions>
              <el-table :data="data.guestItemList">
                <el-table-column label="预订人" prop="guestName" align="center" />
                <el-table-column label="联系电话" prop="phoneNumber" align="center" />
              </el-table>
            </div>
            <div v-if="statusTitle == '已取消'" class="base_details_title">取消原因</div>
            <div v-if="statusTitle == '已取消'" class="base_details_content_second">
              {{ data.cancelReason }}
            </div>
            <div class="base_details_title">酒店信息</div>
            <div class="base_details_content_second">
              <el-table :data="data.roomList">
                <el-table-column label="酒店图片" width="100" align="center">
                  <template #default="scope">
                    <img :src="scope.row.mainPic" :style="{
                      width: '75px',
                      height: '75px',
                    }" />
                  </template>
                </el-table-column>
                <el-table-column label="酒店名称" prop="hotelName" align="center" />
                <el-table-column label="酒店编码" prop="hotelCode" align="center" />
                <el-table-column label="房型" prop="roomCode" align="center" />
                <el-table-column label="价格" prop="duePrice" align="center" />
                <el-table-column label="入住天数" prop="dayNum" align="center" />
                <el-table-column label="小计" prop="totalMoney" align="center" />
              </el-table>
            </div>
            <div class="base_details_title">优惠信息</div>
            <div class="base_details_content_second">
              <el-table :data="data.promotionList">
                <el-table-column label="优惠名称" prop="promotionName" align="center" />
                <el-table-column label="优惠金额" prop="promotionMoney" align="center" />
                <el-table-column label="优惠类型" align="center">
                  <!-- 1020001 优惠券、1020002 礼包兑换、1020003 优惠活动 -->
                  <template #default="scope">
                    <span v-if="scope.row.promotionType == '1020001'">优惠券</span>
                    <span v-else-if="scope.row.promotionType == '1020002'">礼包兑换</span>
                    <span v-else-if="scope.row.promotionType == '1020003'">优惠活动</span>
                    <span>-</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="typeKey === 'after'" class="base_details_title">售后信息</div>
            <div v-if="typeKey === 'after'" class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="售后编码：">{{ data.afterSaleItem.afterSaleCode }}</el-descriptions-item>
                <el-descriptions-item label="订单业务类型：">{{ data.afterSaleItem.mainBusiTypeName }}</el-descriptions-item>
                <el-descriptions-item label="售后类型：">{{ data.afterSaleItem.afterSaleTypeName }}</el-descriptions-item>
                <el-descriptions-item label="售后状态：">{{ data.afterSaleItem.afterSaleStatusName }}</el-descriptions-item>
                <el-descriptions-item label="售后原因类型：">{{ data.afterSaleItem.reasonType }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.reasonDesc" label="售后原因详情：">{{ data.afterSaleItem.reasonDesc }}</el-descriptions-item>
                <el-descriptions-item label="会员编号：">{{ data.afterSaleItem.memberCode }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.cancelInfo" label="售后取消原因：">{{ data.afterSaleItem.cancelInfo }}</el-descriptions-item>
                <el-descriptions-item label="退款金额：">¥{{ data.afterSaleItem.refundMoney }}</el-descriptions-item>
                <el-descriptions-item label="退还储值金额：">¥{{ data.afterSaleItem.depositMoney }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.expressName" label="退回快递公司：">{{ data.afterSaleItem.expressName }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.expressNo" label="退回快递单号：">{{ data.afterSaleItem.expressNo }}</el-descriptions-item>
                <el-descriptions-item label="创建时间：">{{ data.afterSaleItem.createTime }}</el-descriptions-item>
                <el-descriptions-item v-if="data.afterSaleItem.updateTime" label="更新时间：">{{ data.afterSaleItem.updateTime }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer v-if="typeKey === 'after'">
        <el-button v-if="data.afterSaleItem.afterSaleStatus === '1052001'" @click="confirmAfterSale" type="primary">确认退款</el-button>
        <el-button v-if="data.afterSaleItem.afterSaleStatus === '1052001'" @click="cancelAfterSale" type="primary">取消售后</el-button>
        <el-button v-if="data.afterSaleItem.afterSaleStatus === '1052005' || data.afterSaleItem.afterSaleStatus === '1052006'" @click="confirmTakeOver" type="primary">确认收货</el-button>
        <el-button @click="back">关闭</el-button>
      </el-footer>
      <el-footer v-else>
        <el-button v-if="!readOnly && statusTitle == '处理中'" @click="acceptOrder" type="primary">二次已确认</el-button>
        <el-button v-if="!readOnly && (statusTitle == '处理中' || statusTitle == '未付款')" @click="cancelOrder">取消订单</el-button>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
    <CancelOrder ref="cancelOrderRef" @cancelOrder="getCancelOrder"></CancelOrder>
    <CancelAfterSale ref="cancelAfterSaleRef" @cancelAfterSale="getCancelAfterSale"></CancelAfterSale>
    <ConfirmAfterSale ref="confirmAfterSaleRef" :desc="expenseAftersale" :money="refundMoney"
        @submit="confirmAfterSaleSubmit" />
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref } from "vue";
import { $msg, $box } from "@ui/msg";
import useRoute from "@util/router";
import CancelOrder from "@com/order/CancelOrder.vue";
import CancelAfterSale from "@com/order/CancelAfterSale.vue";
import ConfirmAfterSale from "@com/order/ConfirmAfterSale.vue";
import $ from "@util/base"
import api from "@api/order"
import afterApi from "@api/afterSaleOrder";

const route = useRoute()
const urlQuery = route.query()
const typeKey = urlQuery.type
var readOnly = false

$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true
  }
})

const data = ref({
  orderItem: {}, // 订单信息
  guestItemList: [{}], // 预订人信息
  roomList: [], // 房型列表(酒店信息)
  promotionList: [], // 优惠列表
  afterSaleItem: {}, // 售后信息
})
const expenseAftersale = ref(null)
const refundMoney = ref(null)
getData()
function getData() {
  api.detail('hotel', urlQuery.code, urlQuery.afterSaleCode, val => {
    if ($.isNotEmpty(val.afterSaleItems)) {
      val.afterSaleItem = val.afterSaleItems[0]
      refundMoney.value = val.afterSaleItem.refundMoney
    }
    expenseAftersale.value = val.orderItem.expenseAftersale
    data.value = val
    statusTitle.value = val.orderItem.status
    // getConfig(val.orderItem.status)
  })
}

let statusTitle = ref("已完成")
// 1023001 未付款 1023002 处理中 1023003 已取消 1023004 待入住 1023005 已完成
// function getConfig(status) {
//   switch (status) {
//     case "1023001":
//       statusTitle.value = "未付款"
//       break
//     case "1023002":
//       statusTitle.value = "处理中"
//       break
//     case "1023003":
//       statusTitle.value = "已取消"
//       break
//     case "1023004":
//       statusTitle.value = "待入住"
//       break
//     case "1023005":
//       statusTitle.value = "已完成"
//       break
//   }
// }

function acceptOrder() {
  $box.open("二次已确认", "是否二次已确认？", () => {
    api.confirm('hotel', urlQuery.code, () => {
      $msg.succ("二次已确认成功");
      getData()
    }, (msg) => {
      $box.open("二次已确认失败", msg)
    })
  });
}

const cancelOrderRef = ref("");

function cancelOrder() {
  cancelOrderRef.value.show();
}

function getCancelOrder(data) {
  api.cancel({
    type: 'hotel',
    code: urlQuery.code,
    // amount: data.amount,
    remark: data.reason
  }, () => {
    $msg.succ("取消成功");
    getData()
  })
}


function confirmAfterSale() {
  confirmAfterSaleRef.value.show();
}

function confirmAfterSaleSubmit(money) {
  afterApi.confirm(data.value.afterSaleItem.afterSaleCode, money, () => {
    $msg.succ("退款成功");
    getData();
  });
}

const cancelAfterSaleRef = ref(null);
const confirmAfterSaleRef = ref(null);
function cancelAfterSale() {
  cancelAfterSaleRef.value.show();
}

function getCancelAfterSale(data) {
  afterApi.cancel(
    {
      afterSaleCode: data.value.afterSaleItem.afterSaleCode,
      remark: data.reason,
    },
    () => {
      $msg.succ("取消成功");
      getData();
    }
  );
}

function confirmTakeOver() {
  $box.alert("确认收货", `<div>确定已收到退货商品？</div><div>${data.value.afterSaleItem.expressName}：${data.value.afterSaleItem.expressNo}</div>`, () => {
    afterApi.takeOver(data.value.afterSaleItem.afterSaleCode, () => {
      $msg.succ("确定收货成功");
      getData();
    });
  });
}


function back() {
  route.go(-1)
}

</script>

<style lang="scss">
.hotel_order_details {
  height: 100%;
  .el-descriptions__cell {
    width: 33%;
  }
}
</style>